<template>
  <div class="all">
    <Header></Header>
    <div class="body">

      <div class="div-top">
        <div class="div-user">
          <div class="div-user-left">
            <img class="user-avatar" src="../../assets/images/head-img.png">
            <div class="div-user-text">
              <span class="div-user-text-top"><b>用户7363098311514</b></span>
              <span class="div-user-text-middle">+你从事什么职业？</span>
              <span class="div-user-text-bottom">+你的人生格言是什么？</span>
            </div>
          </div>
          <el-button plain class="div-user-button" @click="dialogFormVisible = true">编辑个人资料</el-button>
          <el-dialog title="编辑个人资料" :visible.sync="dialogFormVisible" center>
            <el-form :model="form">
              <el-form-item label="用户名：">
                <el-input v-model="form.name" placeholder="admin" disabled></el-input>
              </el-form-item>
              <el-form-item label="密码：">
                <el-input v-model="form.password" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="邮箱：">
                <el-input v-model="form.email" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="电话号码：">
                <el-input v-model="form.phone" placeholder="请输入内容"></el-input>
              </el-form-item>
              <el-form-item label="头像上传：">
                <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <div slot="footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="save">保 存</el-button>
            </div>
          </el-dialog>
        </div>
      </div>

      <div class="div-bottom">
        <div class="div-title">
          <div class="div-title-article">文章</div>
          <div class="div-title-button">
            <el-button type="text">最新</el-button>
            <el-button type="text">最热</el-button>
          </div>
        </div>

        <div class="div-list">
          <div>
            <div class="div-list-top">
              <img src="../../assets/images/aaa.png" class="div-list-top-img">
              <span class="div-list-top-text">&nbsp;&nbsp;&nbsp;流樱&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;2022-7-22&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
              <el-tag type="info" class="div-list-top-tags">科技</el-tag>
              <el-tag type="info" class="div-list-top-tags">财富</el-tag>
              <el-tag type="info" class="div-list-top-tags">创新</el-tag>
            </div>
            <span class="div-list-main-title"><b>掘金创意开发大赛来了！记录你的灵感迸发时刻！</b></span>
            <div class="div-list-subheading">
              Hello，掘友们好，掘金创意开发大赛来了！你是否曾有过一瞬，灵感创意迸发，但却没有及时记录下的时候？掘金将助你焕发灵感，感受创意乐趣！
            </div>
            <div class="div-list-bottom">
              <i class="el-icon-view">&nbsp;125</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-star-off">&nbsp;10</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-chat-square">&nbsp;23</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="iconfont icon-dianzan1">&nbsp;15</i>
            </div>
          </div>
          <img src="../../assets/images/aaa.png" class="div-list-image">
        </div>

        <div class="div-list">
          <div>
            <div class="div-list-top">
              <img src="../../assets/images/aaa.png" class="div-list-top-img">
              <span class="div-list-top-text">&nbsp;&nbsp;&nbsp;流樱&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;2022-7-22&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
              <el-tag type="info" class="div-list-top-tags">科技</el-tag>
              <el-tag type="info" class="div-list-top-tags">财富</el-tag>
              <el-tag type="info" class="div-list-top-tags">创新</el-tag>
            </div>
            <span class="div-list-main-title"><b>掘金创意开发大赛来了！记录你的灵感迸发时刻！</b></span>
            <div class="div-list-subheading">
              Hello，掘友们好，掘金创意开发大赛来了！你是否曾有过一瞬，灵感创意迸发，但却没有及时记录下的时候？掘金将助你焕发灵感，感受创意乐趣！
            </div>
            <div class="div-list-bottom">
              <i class="el-icon-view">&nbsp;125</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-star-off">&nbsp;10</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-chat-square">&nbsp;23</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="iconfont icon-dianzan1">&nbsp;15</i>
            </div>
          </div>
          <img src="../../assets/images/aaa.png" class="div-list-image">
        </div>

        <div class="div-list">
          <div>
            <div class="div-list-top">
              <img src="../../assets/images/aaa.png" class="div-list-top-img">
              <span class="div-list-top-text">&nbsp;&nbsp;&nbsp;流樱&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;2022-7-22&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
              <el-tag type="info" class="div-list-top-tags">科技</el-tag>
              <el-tag type="info" class="div-list-top-tags">财富</el-tag>
              <el-tag type="info" class="div-list-top-tags">创新</el-tag>
            </div>
            <span class="div-list-main-title"><b>掘金创意开发大赛来了！记录你的灵感迸发时刻！</b></span>
            <div class="div-list-subheading">
              Hello，掘友们好，掘金创意开发大赛来了！你是否曾有过一瞬，灵感创意迸发，但却没有及时记录下的时候？掘金将助你焕发灵感，感受创意乐趣！
            </div>
            <div class="div-list-bottom">
              <i class="el-icon-view">&nbsp;125</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-star-off">&nbsp;10</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="el-icon-chat-square">&nbsp;23</i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <i class="iconfont icon-dianzan1">&nbsp;15</i>
            </div>
          </div>
          <img src="../../assets/images/aaa.png" class="div-list-image">
        </div>

      </div>
    </div>
  </div>


</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        activeName: 'first',
        dialogFormVisible: false,
        form:{
          name:'',
          password:'',
          email:'',
          phone:'',
          avatar:''

        }
      }
    },
    methods: {
      save() {
        var i;
        for(i = 0;i<3;i++){
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }
        this.dialogFormVisible = false;

      },
    }
  }
</script>

<style scoped>
  .all{
    background-color: rgba(0,0,0,0.06);
    height: 100%;
    width: 100%;
  }
  .body {
    display: flex;
    flex-direction: column;
    margin-top: 9vh;
    justify-content: center;
    align-items: center;
  }

  .div-top {
    display: flex;
    height: 20vh;
    width: 50vw;
  }

  .div-user {
    border-top:1vh solid rgba(0,0,0,0.06);
    display: flex;
    background-color: white;
    justify-content: space-between;
    width: 46vw;
  }

  .div-user-left {
    display: flex;
    margin-top: 2vh;
    padding-left: 1vw
  }

  .user-avatar {
    background-color: #f9f9f9;
    border-radius: 50%;
    height: 12vh;
    padding: 12px;
  }

  .div-user-text {
    display: flex;
    flex-direction: column;
    margin: -3px 0px 0px 20px;
  }

  .div-user-text-top {
    color: #000;
    font-size: 35px;
    margin-bottom: 10px;
    margin-top: 12px;
  }

  .div-user-text-middle {
    color: #7B68EE;
    font-size: medium;
    margin-bottom: 12px;
  }

  .div-user-text-bottom {
    color: #7B68EE;
    font-size: medium;
    margin-bottom: 10px;
  }

  .div-user-button {
    border: solid 1px;
    margin: 14vh 2vh 2vh 0vh;
    padding-top: 0vh;
    padding-bottom: 0vh;
    font-size: medium;
    color: #66B1FF;
  }

  .div-bottom {
    display: flex;
    flex-direction: column;
    width: 50vw;
    height: 50vh;
  }

  .div-title {
    display: flex;
    justify-content: space-between;
    width: 46vw;
    margin-top: 10px;
    margin-right: 20px;
    background-color: white;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .div-title-article {
    padding: 10px 0px 0px 30px;
  }

  .div-title-button {
    padding: 0px 20px 0px 0px;
  }

  .div-list {
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    width: 46vw;
    border-bottom: 3px solid rgba(0, 0, 0, 0.06);
    border-top: 3px solid rgba(0, 0, 0, 0.06);
  }

  .div-list-top {
    display: flex;
    padding: 10px;
  }

  .div-list-top-img {
    height: 20px;
    width: 20px;
    border-radius: 50%;
  }

  .div-list-top-text {
    color: #909399;
  }

  .div-list-top-tags {
    margin-top: -5px;
  }

  .div-list-main-title {
    padding: 10px;
    font-size: 20px;
  }

  .div-list-subheading {
    padding: 10px;
    color: #909399;
    font-size: 13px;
  }

  .div-list-bottom {
    padding-left: 10px;
  }

  .div-list-image {
    height: 120px;
    width: 120px;
    padding: 20px;
  }

</style>
